<template>
  <header class="bg-blue-600 text-white shadow-md fixed top-0 left-0 right-0 z-30">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center">
        <button @click="toggleSidebar" class="lg:hidden mr-4 text-white">
          <i class="fa fa-bars text-xl"></i>
        </button>
        <div class="text-xl font-bold">圣杯布局路由示例</div>
      </div>


      <nav class="hidden md:flex space-x-6">
        <router-link to="/" class="hover:text-blue-200 transition-colors">首页</router-link>
        <router-link to="/about" class="hover:text-blue-200 transition-colors">关于</router-link>
        <router-link to="/services" class="hover:text-blue-200 transition-colors">服务</router-link>
        <router-link to="/contact" class="hover:text-blue-200 transition-colors">联系我们</router-link>
      </nav>

      <div class="hidden md:flex items-center space-x-4">
        <button class="text-white hover:text-blue-200 transition-colors">
          <i class="fa fa-search"></i>
        </button>
        <button class="text-white hover:text-blue-200 transition-colors">
          <i class="fa fa-user-circle-o"></i>
        </button>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  emits: ['toggle-sidebar'],
  methods: {
    toggleSidebar() {
      this.$emit('toggle-sidebar')
    }
  }
}
</script>